<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

基本标签（Basic Tags）
    <h1>最大的标题</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>最小的标题</h6>

    <p>这是一个段落。</p>
    <br> （换行）
    <hr> （水平线）
    <!-- 这是注释 -->
文本格式化（Formatting）
    <b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd>
    <pre>预格式化文本</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>

    <abbr> （缩写）</abbr>
    <address> （联系信息）</address>
    <bdo> （文字方向）</bdo>
    <blockquote> （从另一个源引用的部分）</blockquote>
    <cite> （工作的名称）</cite>
    <del> （删除的文本） </del>
    <ins> （插入的文本）</ins>
     <sub> （下标文本）</sub>
     <sup> （上标文本）</sup>
链接（Links）
    普通的链接：<a href="http://www.example.com/">链接文本</a>
    图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
    邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
    书签：
    <a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>
图片（Images）
    <img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
     <!--   <style type="text/css">
            h1 {color:red;}
            p {color:blue;}
        </style>-->
        <div>文档中的块级元素</div>
        <span>文档中的内联元素</span>
无序列表
        <ul>
            <li>项目</li>
            <li>项目</li>
        </ul>
有序列表
        <ol>
            <li>第一项</li>
            <li>第二项</li>
        </ol>
定义列表
        <dl>
            <dt>项目 1</dt>
            <dd>描述项目 1</dd>
            <dt>项目 2</dt>
            <dd>描述项目 2</dd>
        </dl>
表格（Tables）
        <table border="1">
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
            <tr>
                <td>表格数据</td>
                <td>表格数据</td>
            </tr>
        </table>
框架（Iframe）
        <iframe src="demo_iframe.htm"></iframe>
表单（Forms）
        <form action="demo_form.php" method="post/get">
            <input type="text" name="email" size="40" maxlength="50">
            <input type="password">
            <input type="checkbox" checked="checked">
            <input type="radio" checked="checked">
            <input type="submit" value="Send">
            <input type="reset">
            <input type="hidden">
            <select>
                <option>苹果</option>
                <option selected="selected">香蕉</option>
                <option>樱桃</option>
            </select>
            <textarea name="comment" rows="60" cols="20"></textarea>
        </form>
实体（Entities）
        &lt; 等同于 <
        &gt; 等同于 >
        &#169; 等同于 ©


块级元素：占用了全部宽度，前后都有换行    宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
<!-- address , blockquote , center , dir , div , dl , fieldset , form ,
h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li -->
内联元素：块中的一部分,只需要必要的宽度，不强制换行。
            宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，
            就是里面文字或图片的大小;
<!--  a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img ,
input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var        -->
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
     <!--   applet ,button ,del ,iframe , ins ,map ,object , script-->

可以更改内联元素和块元素
<!--li {display:inline;}
span {display:block;}-->
主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素
display:inline  -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。







</body>
</html>